<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/layui/layui_2/layui/css/layui.css"
	media="all">
</head>
<body>
	<br/>
	<div>
		<button id="find" class="layui-btn" lay-submit="" lay-filter="update"><i class="layui-icon">&#xe756;</i>所有类别</button>
		<button id="undercarriage" class="layui-btn" lay-submit="" lay-filter="update"><i class="layui-icon">&#x1007;</i>下架类别</button>
		<button id="save" class="layui-btn" lay-submit="" lay-filter="update"><i class="layui-icon">&#xe61f;</i>增加类别</button>
	</div>
	<table class="layui-table" id="product_remarks" lay-filter="dept_table"></table>
	<script src="${pageContext.request.contextPath }/layui/layui_2/layui/layui.js"></script>
	<script>
		layui.use(['form','element','jquery','table','layer'], function() {
			var form = layui.form,
				element = layui.element,
				$ = layui.jquery,
				table = layui.table,
				layer = layui.layer;
			
			var cols = [ [ {
				field : 'id',
				align : 'center',
				title : '编号',
				width : 280
			}, {
				field : 'name',
				align : 'center',
				title : '类别名称',
				width : 500
			}, {
				field : 'remarks',
				align : 'center',
				title : '类别备注',
				width : 500
			}, {
				title : '操作',
				align : 'center',
				toolbar : '#operation',
				width : 430
			}] ];
			
			//方法级渲染
			table.render({
				elem : '#product_remarks',
				url : '${pageContext.request.contextPath }/json/product/category.json',
				cols : cols,
				id : 'testReload',
				limit: 10,
			    limits: [10, 30, 50],
				page : true
			});
			
			$("#find").click(function(){
				layer.alert("所有类别");
			});
			
			$("#undercarriage").click(function(){
				layer.alert("下架");
			});
			
			$("#save").click(function(){
				layer.alert("增加");
			});
		})
	</script>
	<script type="text/html" id="operation">
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"><i class="layui-icon">&#xe640;</i>下架</a>
	</script>
</body>
</html>